<template>
  <common-page :title="`${form.name}的报告详情`">
    <el-button slot="header" @click="back">返回</el-button>
    <el-button
      slot="header"
      type="primary"
      @click="exportReport"
      :loading="exportLoading"
      v-hasPermi="['system:form:export']"
      >导出</el-button
    >

    <common-excel-preview
      ref="ExcelConfig"
      slot="content"
      :configuration="configuration"
      v-if="hasData"
    >
    </common-excel-preview>
  </common-page>
</template>

<script>
import CommonExcelPreview from "@/components/CommonExcelPreview";
import { getReportInfo } from "@/api/screenConfig/dataReport";

export default {
  name: "config",
  data() {
    return {
      exportLoading: false,
      isPersistenceLoading: false,
      form: {
        id: null,
        name: "",
        description: "",
        configuration: "",
      },
      configuration: {
        table: [],
      },

      hasData: false,
    };
  },
  props: {
    reportId: {
      type: String,
    },
  },
  components: {
    CommonExcelPreview,
  },
  methods: {
    back() {
      this.$emit("close");
    },
    exportReport() {
      this.exportLoading = true;
      this.download(
        "/system/report/form/export",
        {
          id: this.reportId,
          type: "xlsx", //xlsx xls
          classType: 0,
        },
        `${this.form.name || ""}的报告.xlsx`
      ).finally(() => {
        this.exportLoading = false;
      });
    },
    getInfo() {
      getReportInfo({ id: this.reportId, classType: 0 })
        .then((res) => {
          if (res && res.code === 200) {
            this.form.name = res.data.name;
            this.form.description = res.data.description;
            this.form.configuration = res.data.configuration;

            this.configuration = JSON.parse(res.data.configuration);
          } else {
          }
        })
        .catch((err) => {
          console.log("err: ", err);
        })
        .finally(() => {
          this.hasData = true;
        });
    },
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style scoped lang="scss"></style>
